<template>
  <el-drawer
    v-model="isDialog"
    :title="name"
    size="1200px"
    :before-close="cancel">
    <div class="form-wrapper">
      <el-form :disabled="readOnly" @submit.left.prevent>
        <el-form-item label="组件名称">
          <el-input
            class="cop-name"
            v-model.trim="name"
            type="text"
            maxlength="15"
            :show-word-limit="true"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="企微配置" prop="configId">
          <el-select
            v-model="configId"
            placeholder="请选择配置"
          >
            <el-option
              v-for="ele in configList"
              :key="ele.id"
              :label="ele.name"
              :value="ele.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="custom-form">
        <div class="top-tip">
          <el-icon :size="16"><info-filled /></el-icon>
          最多支持同时发送9个回复内容，每个用户每天只能收到一条群发消息
        </div>

        <div>
          <el-switch v-model="form.executeTime" :inactive-value="0" :active-value="1" inactive-text="定点发送" />
        </div>

        <div class="center-tip">
          <span class="circular"></span>
          为了避免频繁通知员工，开启定点发送只在每天9点、12点、15点、18点、21点发送通知员工，不启用表示立即通知发送
        </div>

        <el-form :model="form" :disabled="readOnly">
          <el-form-item style="width: 100%" prop="content">
            <TextAreaUpload
              :content="form.content"
              :attachments="form.attachments"
              @setContent="setContent"
              @setAttachments="setAttachments"
            ></TextAreaUpload>
          </el-form-item>
        </el-form>
      </div>

      <div class="form-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </div>
    <WechatPreview
      class="wechat-prevaiew"
      :content="content"
      :attachments="attachments"
    ></WechatPreview>
  </el-drawer>
</template>

<script setup lang="ts">
import sysConfigApi from "@/api/sysConfigApi";
import TextAreaUpload from "@/components/workWechat/TextAreaUpload.vue";
import WechatPreview from "@/components/workWechat/WechatPreview.vue";
import {NodeDrawerDataModel} from "@/views/workTable/dataModel/NodeDrawerDataModel";
const props = defineProps({
  dialogData: {
    type: Object,
    default: {},
  },
  readOnly: Boolean,
  addNodeEventData: Object,
});
// const { dialogData, addNodeEventData } = toRefs(props);
const emits = defineEmits(["confirm", "cancel"]);
const isDialog = ref(true);
const configList = ref([] as any)
const form = reactive({
  phones: "",
  content: "",
  executeTime: 0,
  attachments: [],
});
const content = ref("");
const configId = ref("")
const attachments = ref([]);
const name = ref("企微群发");
const setAttachments = (val: never[]) => {
  attachments.value = val;
  form.attachments = val
};
const setContent = (val: string) => {

  form.content = val;
  content.value = val;
};

const getConfigList = async()=> {
    let rs:any = await sysConfigApi.getConfigList({externalType: 'workWeChat'});
    if (rs.code == 200) {
      configList.value = rs.payload
    }
  }

const handleConfirm = () => {
  if (!name.value) {
    ElMessage.warning("请输入组件名称");
    return;
  }
  form.phones = "{{$_user.$_phone}}"; //需要进行赋值不能直接把值写死，否则会丢失字段
  // console.log("[ form.value ] >", form);

  emits("confirm", new NodeDrawerDataModel({
    dialogData: {
      name: name.value,
      reachBody: JSON.stringify(form),
      reachType: 5,
    },
  }));
  cancel();
};

const cancel = () => {
  emits("cancel");
};

onBeforeMount(() => {
  getConfigList()
  // if (JSON.stringify(dialogData.value) != "{}") {
  if (JSON.stringify(props.dialogData) != "{}") {
    let params = JSON.parse(props.dialogData.reachBody);
    // console.log("[ params ] >", params);
    form.executeTime = params.executeTime;
    form.phones = params.phones;
    form.content = params.content;
    form.attachments = params.attachments;
    content.value = params.content;
    attachments.value = params.attachments;
    name.value = props.dialogData.name;
  }
  // console.log("form.value  ] >", form);
});
</script>



<style lang="scss" scoped>
.top-tip {
  overflow: hidden;
  width: 454px;
  line-height: 36px;
  color: #3e61a9;
  font-weight: 400;
  background: #e8f2ff;
  font-size: 13px;
  padding-left: 17px;
  border-radius: 4px;
  font-family: PingFangSC-Regular, PingFang SC;
  position: relative;
  .el-icon {
    // margin-top: 25px;
    position: relative;
    top: 2px;
  }
}

.center-tip {
  position: relative;
  width: 454px;
  height: 56px;
  background: #f6faff;
  border-radius: 4px;
  line-height: 20px;
  font-size: 13px;
  font-weight: 400;
  color: #909399;
  padding: 8px 7px 8px 24px;
  font-family: PingFangSC-Regular, PingFang SC;
  .circular {
    display: block;
    width: 6px;
    height: 6px;
    background: #3e61a9;
    border-radius: 50%;
    position: absolute;
    left: 10px;
    top: 15px;
  }
}
.form-wrapper {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.custom-form {
  flex: 1;
}
.form-footer {
  display: flex;
  justify-content: flex-end;
}

.wechat-prevaiew {
  position: fixed;
  top: 10%;
  right: 30px;
}
.cop-name {
  width: 480px;
}
</style>
